.list-box-options {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  cursor: default;

  li {
    position: relative;
    padding: var(--list-box-options-padding, var(--sm4) var(--sm1));
    cursor: default;
    box-sizing: content-box;
    line-height: 1.5;
    min-height: 1.5em;

    // Disable text selection. Without this, if I inadvertently drag my mouse
    // over some blank space in the option, then I select text outside the
    // ListBox.
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    &:hover {
      background: var(--color-navigation-10);
    }

    &.in-focus {
      background: var(--color-navigation-20);
    }

    &.disabled {
      color: var(--color-fg-base-disabled);
      --icon-color: var(--color-fg-base-disabled);
      cursor: not-allowed;
    }
  }

  &.multiple {
    li {
      &.selected {
        background: var(--color-navigation-20);

        &:hover {
          background: var(--color-navigation-25);
        }
      }
    }
  }

  &.truncate {
    li {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
